<template>
	<view class="p-h24 p-v40">
		<view class="relative p-l28 m-b20 title">
			<text class="text-700-132">面试信息</text>
		</view>
		<view class="m-b40 bg-1 r-10 p-a30 ">
			<view class="m-b20">
				<text class="text-400-128">嗨！{{ userInfo.nickname }} 先生：</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">恭喜你投递的【{{ info.title }}】岗位已通过简历筛选，现邀请你参见面试</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">时间：{{ info.dates }} {{ info.times }}</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">联系电话：{{ info.mobile }}</text>
			</view>
			<view>
				<text class="text-400-128">地址：{{ info.address }}</text>
			</view>
		</view>
		<!-- <view class="relative p-l28 m-b20 title">
			<text class="text-700-132">面试时间确认</text>
		</view>
		<view class="m-b40 bg-1 r-10 p-a30 ">
			<view class="flex">
				<text class="text-400-128">日期：</text>
				<view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('date')">
					<text v-if="pickedDate" class="text-400-128">{{ pickedDate }}</text>
					<text v-else class="text-400-328">请选择</text>
					<image class="square-36" src="/static/images/public/calendar.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="flex m-t20">
				<text class="text-400-128">时间：</text>
				<view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('time')">
					<text v-if="pickedTime" class="text-400-128">{{ pickedTime }}</text>
					<text v-else class="text-400-328">请选择</text>
					<image class="square-36" src="/static/images/public/clock.png" mode="aspectFit"></image>
				</view>
			</view>
		</view> -->
		<view class="flex">
			<view class="flex-1 flex-c h-76 r-10 bg-2" @click="handleSuccessIn">
				<text class="text-700-228">确认提交</text>
			</view>
			<view class="m-l20 flex-1 flex-c h-76 r-10 bg-7">
				<text class="text-700-328" @click="$router.go(-1)">返回</text>
			</view>
		</view>
		<up-datetime-picker :show="showPicker" v-model="pickedValue" :mode="pickerMode" closeOnClickOverlay
			@cancel="closePicker" @close="closePicker" @confirm="onConfirm"></up-datetime-picker>
	</view>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { timeFormat } from '@/utils/utils'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
const { userInfo } = useUserStore()
type PickerMode = 'date' | 'time'

const showPicker = ref(false)
const pickerMode = ref<PickerMode>('date')
const pickedValue = ref('')
const pickedDate = ref('')
const pickedTime = ref('')

const openPicker = (mode: PickerMode) => {
	pickerMode.value = mode

	let picked = ''

	if (mode === 'date') {
		const date = pickedDate.value ? +new Date(pickedDate.value) : +Date.now()
		picked = timeFormat(date)
	} else if (mode === 'time') {
		const dateTime = pickedTime.value ? new Date(`${timeFormat(Date.now())} ${pickedTime.value}`) : Date.now()
		picked = timeFormat(+dateTime, 'hh:MM')
	}

	pickedValue.value = picked
	nextTick(() => {
		showPicker.value = true
	})
}

const closePicker = () => {
	showPicker.value = false
}

const onConfirm = (e: any) => {
	pickedValue.value = e.value
	if (e.mode === 'date') {
		pickedDate.value = timeFormat(+new Date(e.value))
	} else {
		pickedTime.value = e.value
	}
	showPicker.value = false
}
//获取面试详情
const info = ref({})
async function getDetail(id) {
	const res = await uni.$u.get('/msg/info', { id })
	info.value = res.data
}
//同意面试
const uid = ref('')
async function handleSuccessIn() {
	const res = await uni.$u.post('/msg/accept_invitation', { id: uid.value })
	if (res.code == 1) {
		uni.showToast({ title: "提交成功" })
		uni.navigateBack()
	} else {
		uni.showToast({ title: res.msg })
	}
}
//初始化
onLoad((e) => {
	uid.value = e.id
	getDetail(e.id)
})

</script>

<style lang="scss">
page {
	background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.title {
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 8rpx;
		height: 26rpx;
		background-color: $bg-color-2;
		transform: translateY(-50%);
	}
}

.field {
	position: relative;

	&::before {
		@include hairline;
		border-width: 1px;
		border-radius: 12rpx;
	}
}
</style>
